<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>3 Color Gradients - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        html {
            color-scheme: dark light;
        }
        
        body {
            background: hsl(0, 0%, 12%);            
            color: white;            
        }
        
        .wrapper {
            max-width: 50rem;
            margin-inline: auto;
            padding-inline: 1rem;
        }

        .site-title {
            font-size: 3rem;
            text-align: center;
        }

        .section-title {
            font-size: 2.25rem;
        }

        section {
            padding-block: 5rem;
        }
    </style>
</head>
<body class="cloak h-100-vh">
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
    <div class="app-bar-item-static no-hover">
        <div class="text-leader">Gradients Demo</div>
    </div>
</nav>

<section class="container-fluid diagonal gr-blue-coral">
    <div class="container">

        <h2 class="section-title">blue-coral</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-sunset-dream">
    <div class="container">

        <h2 class="section-title">sunset-dream</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-deep-space">
    <div class="container">

        <h2 class="section-title">deep-space</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>


<section class="container-fluid diagonal gr-purple-love">
    <div class="container">

        <h2 class="section-title">purple-love</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-cherry-glow">
    <div class="container">

        <h2 class="section-title">cherry-glow</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-cosmic-fusion">
    <div class="container">

        <h2 class="section-title">cosmic-fusion</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-sunny-morning">
    <div class="container">

        <h2 class="section-title">sunny-morning</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-winter-frost">
    <div class="container">

        <h2 class="section-title">winter-frost</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-neon-pulse">
    <div class="container">

        <h2 class="section-title">neon-pulse</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-royal-elegance">
    <div class="container">

        <h2 class="section-title">royal-elegance</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-sunset">
    <div class="container">

        <h2 class="section-title">sunset</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-emerald-sea">
    <div class="container">

        <h2 class="section-title">emerald-sea</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<section class="container-fluid diagonal gr-emerald-green">
    <div class="container">

        <h2 class="section-title">emerald-green</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque cum, perspiciatis a illo veniam ratione expedita assumenda laboriosam modi error maiores fugit soluta vitae temporibus voluptatum ducimus culpa similique quaerat?</p>

    </div>
</section>

<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
